-
Notifications
You must be signed in to change notification settings - Fork 39
Add Tag Filter #150
base: main
Are you sure you want to change the base?
Add Tag Filter #150
Conversation
Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). 📝 Please visit https://cla.developers.google.com/ to sign. Once you've signed (or fixed any issues), please reply here with What to do if you already signed the CLAIndividual signers
Corporate signers
ℹ️ Googlers: Go here for more info. |
@googlebot I signed it! |
Hello @Kartik1397, thank you for your proposal 😊 I have a few suggestions: Colors
AccessibilityCan you add User eXperienceCan you remove the |
gap: 10px; | ||
margin: 0; | ||
padding: 0; | ||
margin: 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Duplicated property
margin: 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤐
public/components/Tag/index.js
Outdated
} | ||
else return (<li></li>); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
An approach to simplify this file will be:
import { Component } from "preact";
import style from "./style.module.css";
const APIS = [
{ label: "paint", style: "paint", text: "Paint" },
{
label: "properties and values",
style: "props",
text: "Properties & Values",
},
{ label: "typed object model", style: "typed", text: "Typed Object Model" },
{ label: "layout", style: "layout", text: "Layout" },
{ label: "animation", style: "animation", text: "Animation" },
];
export default class Tag extends Component {
render(props) {
const TAG = APIS.map((api) =>
api.label === props.label ? api : null
).filter((api) => api != undefined)[0];
return (
<li
class={`${style.tag} ${
props.selected === false
? style[TAG.style]
: style[`${TAG.style}-active`]
}`}
>
<a
href="javascript:void(0)"
onClick={(e) => {
e.preventDefault();
props.setFilter(TAG.label);
}}
title={TAG.text}
>
{TAG.text}
</a>
</li>
);
}
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, this is better than a bunch of if statements.
Hi @Kartik1397! Did you have a chance to review @nucliweb's suggestions? |
Hi @una, Thanks for pointing this, it completely slipped my mind. Will try to do this as soon as possible. |
83be46a
to
d65b890
Compare
All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the ℹ️ Googlers: Go here for more info. |
d65b890
to
2dc467e
Compare
Hi @nucliweb, Thank you for reviewing this PR. |
macOS Big Sur in Dark mode |
@una Can you see the X in white color with Dark mode? |
Fixes #10
Screenshot